<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="isEdit?'修改用户':'新增用户'"
    width="800px"
    :visible.sync="visible"
  >
    <el-form class="modalForm" label-width="80px" :rules="rules" ref="form" :model="form">
      <el-form-item label="工号" prop="employeeId">
        <el-input type="number" placeholder="请输入工号" autocomplete="false" v-model="form.employeeId" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input type="text" placeholder="请输入姓名" autocomplete="false" v-model="form.name" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio :label="item.value" v-for="(item,index) in sexArr" :key="index">{{ item.title }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="婚姻状况" prop="marryStatus">
        <el-select clearable style="width: 100%" v-model="form.marryStatus" placeholder="请选择">
          <el-option
            v-for="(item,index) in marriageArr"
            :key="index"
            :label="item.title"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出生年月" prop="birth">
        <el-date-picker
          style="width: 100%"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-model="form.birth"
          placeholder="请选择"
        />
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input type="number" placeholder="请输入身份证号" autocomplete="false" v-model="form.idCard" />
      </el-form-item>
      <el-form-item label="职称" prop="jobTitle">
        <el-input type="text" placeholder="请输入职称" autocomplete="false" v-model="form.jobTitle" />
      </el-form-item>
      <el-form-item label="民族" prop="nation">
        <el-select clearable :style="inputWidth" v-model="form.nation" placeholder="请选择">
          <el-option
            v-for="(item,index) in nationArr"
            :key="index"
            :label="item.title"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="籍贯" prop="jobTitle">
        <el-select clearable :style="inputWidth" v-model="form.country" placeholder="请选择">
          <el-option
            v-for="(item,index) in originArr"
            :key="index"
            :label="item.title"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item status-icon label="手机号" prop="phone">
        <el-input placeholder="手机号" v-model="form.phone" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button @click="handleOk" type="primary">{{ isEdit ? '修改' : '新增' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { openNotification, isvalidPhone, checkName, getDicData } from '@/utils/util'
import { createUserInfo, updateUserInfo } from '@/api/archives'
import pick from 'lodash.pick'

export default {
  data() {
    const validPhone = (rule, value, callback) => {
      let flag = this.isEdit ? 1 : 0
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      isEdit: false,
      visible: false,
      inputWidth: {
        width: '100%'
      },
      form: {},
      rules: {
        // username: [{ required: true, validator: validName, trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, validator: validPhone, trigger: 'blur' }]
      },
      disabled: true,
      confirmLoading: false,
      deptData: [],
      positionData: [],
      sexArr: [],
      marriageArr: [],
      nationArr: [],
      originArr: []
    }
  },
  mounted() {
    this.sexArr = getDicData('001', '001007')
    this.marriageArr = getDicData('001', '001005')
    this.nationArr = getDicData('001', '001004')
    this.originArr = getDicData('001', '001001')
  },
  methods: {
    edit(bool, record) {
      this.visible = true
      this.isEdit = bool
      this.form = Object.assign({}, record)
    },
    handleOk(e) {
      e.preventDefault()
      let _this = this
      this.$refs.form.validate(async valid => {
        if (valid) {
          let res = null,
            mes = null
          if (this.isEdit) {
            // 修改
            res = await updateUserInfo(this.form)
            mes = '修改操作成功'
          } else {
            res = await createUserInfo(this.form)
            mes = '新增操作成功'
          }
          if (res.state === '000000') {
            openNotification('success', mes)
            this.visible = false
            this.$emit('refresh')
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.short-input {
  width: 428px;
  margin-right: 20px;
}

.el-radio >>> .el-radio__label {
  /* display: none; */
  margin-right: 10px;
}
</style>
